<template>
    <div class="view">
        <div class="friend-header">
            <ul class="sticky-header">
                <li class="sticky-top" :class="{'isSticky':cubeSticky.scrollY>=60}">
                    <span class="iconfont icon-fanhui" @click="back"></span>
                    <span class="nickname" id="nickname" :class="{'hidden':cubeSticky.scrollY<60}">{{friendInfo.nickName}}</span>
<!--                    <span class="iconfont icon-sandian rt"></span>-->
<!--                    <span class="iconfont icon-xiaoxi rt"></span>-->
                </li>
            </ul>
        </div>
        <cube-sticky :pos="cubeSticky.scrollY" :check-top="cubeSticky.checkTop" ref="sticky">
            <cube-scroll :options="cubeSticky.scrollOptions"
                         :scroll-events="cubeSticky.scrollEvents"
                         @scroll="scrollHandler"
                         ref="mainScroll"
                         :data="friendDynamic"
                         @pulling-down="onPullingDown"
                         @pulling-up="onPullingUp">
                <div class="info-box">
                    <div class="wavy-box">
                        <wavy-svg class="wavy-svg"></wavy-svg>
                    </div>
                    <head-img class="head-img" :styleObject="{width:'21vw',height:'21vw'}" showObject="friend" :friend="friend"></head-img>
                    <div class="friend-name">{{friendInfo.nickName}}</div>
                    <div class="friend-factor">
                        <span class="age">{{friendInfo.age==='未知'?'年龄未知':(friendInfo.age||'年龄')+'岁'}}</span>
                        <span class="height">{{friendData.SNAP_HEIGHT==='未填写'?'身高未知':(friendData.SNAP_HEIGHT||'身高')}}</span>
                        <span class="nativePlace" v-if="friendInfo.snap_city_id!=='未填写'">{{friendInfo.snap_city_id}}</span>
                        <!--                        <span class="matchDegree">??</span>-->
                    </div>
                    <div class="img-show">
                        <div class="img-show-none flex hidden">
                            <div class="left flex">
                                <div class="iconfont icon-xiangji2"></div>
                                <div>邀Ta上传</div>
                            </div>
                            <div class="right">
                                Ta未上传照片，快邀请Ta传图吧
                            </div>
                        </div>
                        <cube-scroll ref="scroll" :data="friendInfo.photo" direction="horizontal" class="horizontal-scroll-list-wrap">
                            <ul class="list-wrapper">
                                <li v-for="(item, index) in friendInfo.photo" class="list-item" :style="{'background-image':`url(${item.uploadfile.file_path})`}">
                                    <img :src="item.uploadfile.file_path" @click="handleImgsClick(index)">
                                </li>
                            </ul>
                        </cube-scroll>
                    </div>
                </div>
                <div class="detail-info">
                    <cube-sticky-ele ele-key="navTab" class="self-info-head">
                        <ul class="sticky-header">
                            <li class="sticky-middle">
                                <cube-tab-bar v-model="detailInfo.selectedLabel" :use-transition="true" ref="tabNav" :data="detailInfo.tabLabels" @change="changePage"></cube-tab-bar>
                            </li>
                        </ul>
                    </cube-sticky-ele>
                    <div class="tab-slide-container">
                        <div class="tab-content-wrap" v-show="detailInfo.selectedLabel ==='资料'">
                            <div class="self-intro">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>个人简介</div>
                                </div>
                                <div class="content">{{friendInfo.INTRODUCTION ? friendInfo.INTRODUCTION:'TA很懒，没有想写的'}}</div>
                            </div>
                            <div class="self-intro authentication">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>认证</div>
                                </div>
                                <div class="content flex">
                                    <div class="real">
                                        <div class="icon-box" :class="{'is-real':friendInfo.authentication>0}"><span class="iconfont icon-renzheng"></span></div>
                                        <div>实名认证</div>
                                    </div>
                                </div>
                            </div>
                            <div class="self-intro base-info">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>基本资料(12/12)</div>
                                </div>
                                <div class="content">
                                    <div class="id flex"><span>ID</span><span class="ellipsis">{{friendInfo.user_no}}</span></div>
                                    <div class="nickname flex"><span>昵称</span><span class="ellipsis">{{friendInfo.nickName}}</span></div>
                                    <div class="sex flex"><span>性别</span><span class="ellipsis">{{friendInfo.gender===2?'女':'男'}}</span></div>
                                    <div class="age flex"><span>年龄</span><span class="ellipsis">{{friendInfo.age===0?'未知':friendInfo.age+'岁'}}</span></div>
                                    <div class="height flex"><span>身高</span><span class="ellipsis">{{friendData.SNAP_HEIGHT}}</span></div>
                                    <div class="education flex"><span>学历</span><span class="ellipsis">{{friendData.SNAP_EDUCATION}}</span></div>
                                    <div class="income flex"><span>月收入</span><span class="ellipsis">{{friendData.SNAP_INCOME}}</span></div>
                                    <div class="home flex"><span>居住地</span><span class="ellipsis">{{liveAddress}}</span></div>
                                    <div class="arital-status flex"><span>婚姻状况</span><span class="ellipsis">{{friendData.SNAP_MARITAL_STATUS}}</span></div>
                                    <div class="children flex"><span>子女情况</span><span class="ellipsis">{{friendData.SNAP_CHILD}}</span></div>
                                    <div class="house flex"><span>购房情况</span><span class="ellipsis">{{friendData.SNAP_HOUSE_PURCHASE}}</span></div>
                                    <div class="car flex"><span>购车情况</span><span class="ellipsis">{{friendData.SNAP_CAR_PURCHASE}}</span></div>
                                </div>
                            </div>
                            <div class="self-intro hobby">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>兴趣爱好</div>
                                </div>
                                <div class="content flex" v-if="hobbyList!==''">
                                    <span v-for="hobby in hobbyList">{{hobby}}</span>
                                </div>
                                <div class="content flex" v-else>
                                    TA还未添加兴趣爱好!
                                </div>
                            </div>
                            <div class="self-intro base-info archives">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>小档案(13/13)</div>
                                </div>
                                <div class="content">
                                    <div class="home flex"><span>家乡</span><span class="ellipsis">{{friendData.SNAP_HOMETOWN_CITY_ID}}</span></div>
                                    <div class="residence flex"><span>户口</span><span class="ellipsis">{{friendData.SNAP_REGISTERED_RESIDENCE_CITY_ID}}</span></div>
                                    <div class="race flex"><span>民族</span><span class="ellipsis">{{friendData.SNAP_NATION}}</span></div>
                                    <div class="zodiac flex"><span>属相</span><span class="ellipsis">{{friendData.SNAP_ZODIAC}}</span></div>
                                    <div class="constellation flex"><span>星座</span><span class="ellipsis">{{friendData.SNAP_CONSTELLATION}}</span></div>
                                    <div class="blood-type flex"><span>血型</span><span class="ellipsis">{{friendData.SNAP_BLOODTYPE}}</span></div>
                                    <div class="shape flex"><span>体型</span><span class="ellipsis">{{friendData.SNAP_SHARE}}</span></div>
                                    <div class="weight flex"><span>体重</span><span class="ellipsis">{{friendData.SNAP_WEIGHT}}</span></div>
                                    <div class="facial-evaluate flex"><span>相貌自评</span><span class="ellipsis">{{friendData.SNAP_EVALUATION}}</span></div>
                                    <div class="religious-belief flex"><span>宗教信仰</span><span class="ellipsis">{{friendData.SNAP_BELIEF}}</span></div>
                                    <div class="smoke flex"><span>是否吸烟</span><span class="ellipsis">{{friendData.SNAP_SMOKE}}</span></div>
                                    <div class="drink flex"><span>是否喝酒</span><span class="ellipsis">{{friendData.SNAP_DRINK}}</span></div>
                                    <div class="daily-life flex"><span>生活作息</span><span class="ellipsis">{{friendData.SNAP_DAILYLIFE}}</span></div>
                                </div>
                            </div>
                            <div class="self-intro base-info enducation-work">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>教育及工作(7/7)</div>
                                </div>
                                <div class="content">
                                    <div class="school flex"><span>毕业院校</span><span class="ellipsis">{{friendData.SNAP_UNIVERSITY}}</span></div>
                                    <div class="major flex"><span>所学专业</span><span class="ellipsis">{{friendData.SNAP_MAJOR}}</span></div>
                                    <div class="job flex"><span>职业职务</span><span class="ellipsis">{{friendData.SNAP_DUTIES}}</span></div>
                                    <div class="company flex"><span>公司性质</span><span class="ellipsis">{{friendData.SNAP_COMPANY_NATURE}}</span></div>
                                    <div class="industry flex"><span>公司行业</span><span class="ellipsis">{{friendData.SNAP_COMPANY_INDUSTRY}}</span></div>
                                    <div class="work-condition flex"><span>工作状态</span><span class="ellipsis">{{friendData.SNAP_WORKING_CONDITION}}</span></div>
                                    <div class="language flex"><span>掌握语言</span><span class="ellipsis" v-html="languageHtml"></span></div>
                                </div>
                            </div>
                            <div class="self-intro base-info family">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>家庭状况(6/6)</div>
                                </div>
                                <div class="content">
                                    <div class="rank flex"><span>家中排行</span><span class="ellipsis">{{friendData.SNAP_FAMILY_RANKING}}</span></div>
                                    <div class="parent flex"><span>父母情况</span><span class="ellipsis">{{friendData.SNAP_PARENT_SITUATION}}</span></div>
                                    <div class="father-work flex"><span>父亲工作</span><span class="ellipsis">{{friendData.SNAP_FATHER_WORK}}</span></div>
                                    <div class="mother-work flex"><span>母亲工作</span><span class="ellipsis">{{friendData.SNAP_MOTHER_WORK}}</span></div>
                                    <div class="parent-income flex"><span>父母经济</span><span class="ellipsis">{{friendData.SNAP_PARENT_ECONOMY}}</span></div>
                                    <div class="parent-medical-insurance flex"><span>父母医保</span><span class="ellipsis">{{friendData.SNAP_PARENTAL_INSURANCE}}</span></div>
                                </div>
                            </div>
                            <div class="self-intro base-info love-plan">
                                <div class="title flex">
                                    <div class="deco-line"></div>
                                    <div>爱情规划(8/8)</div>
                                </div>
                                <div class="content">
                                    <div class="marry-time flex"><span>想何时结婚</span><span class="ellipsis">{{friendData.SNAP_MARRIAGE_TIME}}</span></div>
                                    <div class="date-type flex"><span>偏爱约会方式</span><span class="ellipsis">{{friendData.SNAP_DATING_STYLE}}</span></div>
                                    <div class="value-character flex"><span>希望对方看重</span><span class="ellipsis">{{friendData.SNAP_OTHER_SIDE_VALUES}}</span></div>
                                    <div class="wedding flex"><span>期待婚礼形式</span><span class="ellipsis">{{friendData.SNAP_WEDDING_FORM}}</span></div>
                                    <div class="live-with-parent flex"><span>愿与对方父母住否</span><span class="ellipsis">{{friendData.SNAP_LIVING_WITH_PARENTS}}</span></div>
                                    <div class="children flex"><span>是否想要孩子</span><span class="ellipsis">{{friendData.SNAP_WANT_CHILDREN}}</span></div>
                                    <div class="cooking flex"><span>厨艺状况</span><span class="ellipsis">{{friendData.SNAP_COOKING_CONDITION}}</span></div>
                                    <div class="housework flex"><span>家务分工</span><span class="ellipsis">{{friendData.SNAP_DIVISION_OF_LABOUR}}</span></div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-content-wrap friend-dynamic-box" v-show="detailInfo.selectedLabel ==='动态'">
                            <div class="none-dynamic" v-if="friendDynamicTotal==0">
                                <p class="iconfont icon-zanwudongtai"></p>
                                暂无动态...
                            </div>
                            <ul class="friend-dynamic" v-if="friendDynamicTotal!==0">
                                <li class="item" v-for="(item,index) in friendDynamic">
                                    <div class="title">{{item.type==1?'上传头像':item.type==2?'自我介绍':item.type==3?'上传视频':item.type==4?'上传照片':''}}</div>
                                    <div class="upload-content">
                                        <img class="upload-headImg" v-if="item.type==1 || item.type==4" :src="item.content.file_path">
                                        <div class="upload-selfIntro ellipsis" v-if="item.type==2">
                                            {{item.content}}
                                        </div>
                                    </div>
                                    <div class="other">
                                        {{new Date(item.create_time*1000).getMonth()+1<10?'0'+(new Date(item.create_time*1000).getMonth()+1):new Date(item.create_time*1000).getMonth()+1}}/{{new Date(item.create_time*1000).getDate()<10?'0'+new
                                        Date(item.create_time*1000).getDate():new Date(item.create_time*1000).getDate()}} <span class="rt"><i class="iconfont icon-buzan" @click="praise(item.id,index)"></i> {{item.zans_count}}赞</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </cube-scroll>
        </cube-sticky>
        <div class="fix-box flex">
            <div class="matchmaker" @click="applyMatch(friendInfo.user_id)">
                <span class="iconfont icon-tubiao_UMEqianxian"></span>
                <span>牵线</span>
            </div>
            <div class="chat" @click="toChat">
                <span class="iconfont icon-iconfontquanbuxiaoxizhengchang"></span>
                <span>聊天</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch} from "vue-property-decorator";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import DialogConfig from "@/constant/DialogConfig";
    import Scene from "@/render/Scene";
    import HeadImg from "@/components/HeadImg.vue";
    import WavySvg from "@/components/WavySvg.vue";
    import Http from "@/service/Http";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import {updateUser} from "@/store/dispatches";
    import CommonUnit from "@/unit/CommonUnit";
    import {Route} from "vue-router";

    Component.registerHooks([
        "beforeRouteEnter",
        "beforeRouteLeave",
        "beforeRouteUpdate",
    ]);

    @Component({
        components: {
            HeadImg,
            WavySvg
        }
    })
    export default class FriendInfo extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private currentValue: string = "/";
        private page: number = 1;
        private friendDynamic: any[] = [];//好友动态
        private friendDynamicTotal: number = 0;//好友动态条数
        private friendInfo: any = {};
        private friendData: any = {};
        private matchResult: any = {};
        private hobbyList: any[] = [];
        private temp: string = '0';
        private cubeSticky: any = {//吸附组件配置信息
            scrollEvents: ["scroll"],
            scrollY: 0,
            checkTop: true,
            scrollOptions: {
                stopPropagation: true,
                bounce: false,
                pullDownRefresh: {txt: "更新成功"},
                pullUpLoad: false,
                scrollbar: false
            }
        };

        @State("UserStore")
        public user!: InterfaceUser;

        private detailInfo: any = {//资料，匹配，动态滑动配置信息
            selectedLabel: "资料",
            tabLabels: [{
                label: "资料"
            }, {
                label: "动态"
            }],
        };

        private get liveAddress(): string {
            if (this.friendData.HOMETOWN_PROVINCE_ID !== 0 && this.friendData.HOMETOWN_CITY_ID !== 0) {
                return `${this.friendData.SNAP_HOMETOWN_CITY_ID}`;
            } else if (this.friendData.HOMETOWN_PROVINCE_ID !== 0) {
                return this.friendData.SNAP_HOMETOWN_PROVINCE_ID;
            } else {
                return this.friendData.SNAP_HOMETOWN_CITY_ID;
            }
        }

        private get languageHtml(): string {
            return this.friendData.SNAP_MASTER_LANGUAGE ? this.friendData.SNAP_MASTER_LANGUAGE.split(",").join("<br/>") : "";
        }

        private beforeRouteLeave(to: Route, from: Route, next: () => void): void {
            if (to.name == "main") {
                to.query.temp = this.temp;
                to.query.index = this.$route.query.index;
                console.log(to.query);
            }
            next();
        }

        private getFriendDynamic(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            Http.get(this.api.getUserDynamic, {page: this.page, size: 3, user_id: this.friendInfo.user_id}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    loadToast.hide();
                    this.page++;
                    this.friendDynamicTotal = res.data.total;
                    this.friendDynamic = res.data.data;
                    console.log(res);
                } else {
                    loadToast = (<any> this).$createToast({
                        time: 2500,
                        type: "error",
                        mask: true,
                        txt: `${res.msg}`,
                        onTimeout: () => {
                            this.navigateBack();
                        }
                    }).show();
                }
            }).catch((res) => {
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private onPullingDown(): void {
            (this as any).$refs.mainScroll.forceUpdate();
        }

        private onPullingUp(): void {
            Http.get(this.api.getUserDynamic, {page: this.page, size: 3, user_id: this.friendInfo.user_id}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    if (res.data.data !== []) {
                        this.friendDynamic = this.friendDynamic.concat(res.data.data);
                        this.$nextTick(() => {
                            (this as any).$refs.mainScroll.refresh();
                            (this as any).$refs.mainScroll.forceUpdate();
                        });
                        this.page++;
                    } else if (res.data.data == []) {
                        (this as any).$refs.mainScroll.forceUpdate();
                    }
                }
            });
        }

        private get friendImgs(): string[] {
            const friendImgs: string[] = [];
            for (let i in this.friendInfo.photo) {
                friendImgs.push(this.friendInfo.photo[i].uploadfile.file_path);
            }
            return friendImgs;
        }

        private handleImgsClick(index: Number): void {//好友图片预览
            const params = {
                $props: {
                    imgs: this.friendImgs,
                    initialIndex: index, // 响应式数据的key名
                    loop: false
                },
            };
            (<any> this).$createImagePreview({...params}).show();
        }

        private scrollHandler({y}: any): void {//cubeSticky的scroll滚动事件
            this.cubeSticky.scrollY = -y;
        }

        private getMatchResult(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "计算中..."
            }).show();
            Http.get(this.api.userMatching, {user_id: this.friendId}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    loadToast.hide();
                    console.log(res);
                    const matchResult: any = {};
                    matchResult.score = res.data.score;
                    let result = new Set(res.data.active);
                    if (result.has("PROVINCE_ID")) {
                        result.delete("PROVINCE_ID");
                        matchResult.active = Array.from(result).slice(0, 5);
                    } else {
                        matchResult.active = res.data.active.slice(0, 5);
                    }
                    matchResult.active = CommonUnit.arrayUnderlineToHump(matchResult.active);
                    result = new Set(res.data.passive);
                    if (result.has("PROVINCE_ID")) {
                        result.delete("PROVINCE_ID");
                        matchResult.passive = Array.from(result).slice(0, 5);
                    } else {
                        matchResult.passive = res.data.passive.slice(0, 5);
                    }
                    this.matchResult = matchResult;
                } else {
                    loadToast = (<any> this).$createToast({
                        time: 2500,
                        type: "error",
                        mask: true,
                        txt: `${res.msg}`,
                        onTimeout: () => {
                            this.navigateBack();
                        }
                    }).show();
                }
            }).catch((res) => {
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });

        }

        private changePage(current: any): void {
            if (current == "动态" && !this.friendDynamic.length) {
                this.getFriendDynamic();
                this.$set(this.cubeSticky.scrollOptions, "pullUpLoad", {
                    threshold: 0,
                    txt: {more: "上滑加载更多", noMore: "没有更多数据了..."},
                    visible: false
                });
            }
            if (current == "动态") {
                this.$set(this.cubeSticky.scrollOptions, "pullUpLoad", {
                    threshold: 0,
                    txt: {more: "上滑加载更多", noMore: "没有更多数据了..."},
                    visible: false
                });
            }
            // else {
            //     this.$set(this.cubeSticky.scrollOptions, "pullUpLoad", false);
            // }
            if(current == "资料"){
                this.$set(this.cubeSticky.scrollOptions, "pullUpLoad", false);
            }
            this.$nextTick(() => {
                (<any> this).$refs.sticky.refresh();
                (<any> this).$refs.mainScroll.refresh();
            });
        }

        private scroll(pos: any): void {//cube-slide的滚动
            const x = Math.abs(pos.x);
            const tabItemWidth = (<any> this).$refs.tabNav.$el.clientWidth;
            const slideScrollerWidth = (<any> this).$refs.slide.slide.scrollerWidth;
            const deltaX = x / slideScrollerWidth * tabItemWidth;
            (<any> this).$refs.tabNav.setSliderTransform(deltaX);
        }

        private findIndex(ary: Array<object>, fn: any): number {
            if (ary.findIndex) {
                return ary.findIndex(fn);
            }
            let index = -1;
            ary.some((item: Object, i: any, ary: Array<object>) => {
                const ret = fn.call(this, item, i, ary);
                if (ret) {
                    index = i;
                    return ret;
                }
            });
            return index;
        }

        private get initialIndex(): number {//cube-slide资料，匹配，动态滑动
            let index = 0;
            index = this.findIndex(this.detailInfo.tabLabels, (item: any) => item.label === this.detailInfo.selectedLabel);
            return index;
        }

        private back(): void {
            this.navigateBack();
        }

        private get friendId(): string {
            return String(this.$route.query.friendId || "");
        }

        private get friend(): any {
            return {
                headImg: this.friendInfo.avatar ? this.friendInfo.avatar.file_path : "",
                status: this.friendInfo.avatar ? this.friendInfo.avatar.file_status.status:0,
            };
        }

        private applyMatch(id:number):void{
            (this as any).$createDialog({
                type: 'confirm',
                icon: 'cubeic-alert',
                title: '确认申请牵线',
                content: '',
                confirmBtn: {
                    text: '确定',
                    active: true,
                    disabled: false,
                    href: 'javascript:;'
                },
                cancelBtn: {
                    text: '取消',
                    active: false,
                    disabled: false,
                    href: 'javascript:;'
                },
                onConfirm: () => {
                    let toast = (<any> this).$createToast({
                        time: 0,
                        txt: "申请中...",
                        mask: true
                    }).show();
                    try {
                        Http.post(this.api.addMatchRequestApply, {user_id: id}, {token: this.user.token}).then((res)=>{
                            if (res.code === 1) {
                                this.authentication();
                                toast = (<any> this).$createToast({
                                    time: 2500,
                                    txt: "申请成功",
                                    type: "correct",
                                    mask: true,
                                    onTimeout: () => {
                                        this.temp='1';
                                        this.back();
                                    }
                                }).show();
                            } else {
                                toast.hide();
                                this.globalSingleResultToast(res);
                            }
                        });
                    } catch (e) {
                        toast.hide();
                    }
                },
                onCancel: () => {

                }
            }).show()
        }

        private get self(): any {
            return {
                headImg: this.user.avatar ? this.user.avatar.filePath : ""
            };
        }

        private praise(id: number, index: number): void {
            try {
                Http.post(this.api.dynamicZans, {id: id}, {token: this.user.token}).then((res) => {
                    if (res.code == 1) {
                        this.friendDynamic[index].zans_count++;
                    } else {
                        this.globalSingleResultToast(res);
                    }
                });
            } catch (e) {
                console.log(e);
            }
        }

        private mounted(): void {
            this.currentValue = this.$route.path;
            Http.get(this.api.getIntentionUser, {id: this.friendId}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    this.friendInfo = res.data;
                    this.friendData = res.data.user_info;
                    this.hobbyList = this.friendData.SNAP_HOBBY!=='未填写' ? this.friendData.SNAP_HOBBY.split(",") : "";
                    let newPhoto: any[]=[];
                    this.friendInfo.photo.forEach((el:any, index:number)=>{
                        if(el.status){
                            newPhoto.push(el);
                        }
                    });
                    this.friendInfo.photo=newPhoto;
                    this.$nextTick(() => {
                        (<any> this).$refs.sticky.refresh();
                        // (<any> this).$refs.detailScroll.disable();

                    });
                } else {
                    this.globalSingleResultToast(res);
                }
            });


        }

        private toChat(): void {
            if (this.user.userRank < 5) {
                const dialogConfig = new DialogConfig();
                (<any> this).$createDialog({
                    ...dialogConfig.getBecomeMemberConfig(),
                    onConfirm: () => {
                        this.navigateTo({
                            name: "matchmakerRank",
                            query: {
                                back: 1
                            }
                        });
                    }
                }).show();
            } else {
                this.navigateTo({
                    name: "chatDetail",
                    query: {
                        toId: this.friendId
                    }
                });
            }
        }
    }
</script>

<style scoped lang="stylus">
    .view
        height 100vh;
        width 100vw;
        background-color $theme-page-chat-background-color;
        $wavy-box-height := 60px;


        .friend-header
            background-color #FFBACF

        .sticky-top
            padding calc(15px + var(--safe-area-inset-top)) 10px 15px 10px;
            color #fff;

            .nickname
                font-size 16px;
                padding-left 6px;

            .icon-sandian
                font-size 24px;

            .icon-xiaoxi
                font-size 24px;
                margin-right 7px;

        >>> .cube-sticky
            height calc(100vh - 46px - 46px - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));

        >>> .cube-sticky-content

            .isSticky
                color $theme-common-color;
                background-color #fff;

            .sticky-middle
                background-color #fff;

                &::after
                    display block;
                    content '';
                    width 100vw;
                    height 1px;
                    background-color $theme-line-color;
                    position absolute;
                    bottom 0px;
                    left 0px;

                .cube-tab
                    padding 15px 0;
                    position relative

                .cube-tab_active
                    color $theme-common-color;

                    &::after
                        content '';
                        display block;
                        width 100%;
                        height 2px;
                        left 0;
                        bottom 1px;
                        position absolute;
                        background $theme-common-color;

                .cube-tab-bar-slider
                    background-color $theme-common-color;

        .info-box
            background-color #fff;

            &::before
                content '';
                height calc(60px + 30px);
                display block;
                clear both;
                width 100vw;

            .wavy-box
                .wavy-svg
                    position absolute;
                    top 0px;
                    left 0px;
                    z-index 50;
                    margin-top -20px;

                .section
                    width 80px;
                    height 11vw;

                    background-color #FFD7F3;
                    position absolute;
                    top 40px;
                    z-index 2;

                    transform: skew(62deg, -27deg);
                    border-top-right-radius 100%;
                    border-bottom-left-radius 100%;

            .head-img
                position absolute;
                z-index 100;
                left calc(50vw - 40px);
                top: 2px

            .friend-name
                text-align center;
                font-size 18px;

            .friend-factor
                margin-top 15px;
                text-align center;
                color $theme-auxiliary-color;

                span
                    padding 0px 8px;
                    border-right 1px solid $theme-auxiliary-color;

                    &:last-child
                        border none;

            .img-show
                padding-top 20px;
                .img-show-none
                    padding 20px 15px;
                    padding-top 0px;
                    align-items center;

                    .left
                        width 70px;
                        height 70px;
                        border 1px dashed $theme-line-color;
                        border-radius 5px;
                        text-align center;
                        flex-wrap wrap;
                        align-content center;
                        color $theme-viceColor-font;

                        div
                            width 100vw;

                        .icon-xiangji2
                            font-size 30px;
                            color #B9B8CD;
                            margin-bottom 3px;

                    .right
                        width calc(100vw - 80px);
                        text-align center;


                >>> .horizontal-scroll-list-wrap
                    margin 0 12px;
                    overflow hidden

                    .cube-scroll-content
                        display inline-block;


                        .list-wrapper
                            padding-bottom 10px;
                            white-space nowrap;

                            .list-item
                                display inline-block;
                                margin 0 3px;
                                height 80px;
                                width 80px;
                                background-position center;
                                background-size cover;

                                img
                                    height 100%;
                                    width 100%;

        .detail-info
            margin-top 15px;

            .self-info-head
                background-color #fff;

                >>> .cube-tab-bar
                    .cube-tab_active
                        color $theme-common-color;

                    .cube-tab-bar-slider
                        background-color $theme-common-color;

                    .cube-tab
                        padding 15px 0;
                        position relative;

                    .cube-tab_active
                        &::after
                            content '';
                            display block;
                            width 100%;
                            height 2px;
                            left 0;
                            bottom 0px;
                            position absolute;
                            background $theme-common-color;

            >>> .tab-slide-container
                //height 100vh;

                .tab-content-wrap
                    white-space normal;

                    .self-intro
                        background-color #fff;

                        .title
                            font-size 16px;
                            align-items center;
                            height 40px;
                            position relative;

                            &::after
                                display block;
                                content '';
                                width calc(100vw - 30px);
                                height 1px;
                                background-color $theme-line-color;
                                position absolute;
                                bottom 0px;
                                left 15px;

                            .deco-line
                                width 20px;
                                height 20px;
                                border-left 2px solid $theme-common-color;

                            .title-text
                                width calc(100vw - 20px - 20px);

                                span
                                    color $theme-common-color;

                        .content
                            padding 15px;
                            line-height 1.4em;
                            padding-bottom 30px;

                    .authentication
                        margin-top 20px;

                        .content
                            padding 15px;
                            justify-content: center;

                            .real
                                text-align center;

                                .icon-box
                                    width 60px;
                                    height 60px;
                                    border-radius 50%;
                                    background-color $theme-page-common-background-color;
                                    line-height 60px;
                                    margin-bottom 10px;

                                    .icon-renzheng
                                        font-size 25px;
                                        color #fff;

                                .is-real
                                    background #DE1B9A !important;


                    .base-info
                        margin-top 15px;

                        .content
                            padding 10px 15px;

                            > div
                                padding 8px 0px;

                                > span
                                    display inline-block;
                                    width 50vw;

                    .hobby
                        margin-top 15px;

                        .content
                            line-height normal;
                            padding 15px;
                            flex-wrap wrap;

                            > span
                                display inline-block;
                                padding 3px 15px;
                                border 1px solid $theme-line-color;
                                border-radius 100px;
                                margin 5px;


            .match-module
                width 100vw;
                //height calc(100vh - 38px - 38px);
                background-color #fff;
                overflow hidden;

                .no-match
                    padding 20px 20vw;

                    .headImg-link
                        position relative;

                        .friend-img
                            position absolute;
                            left -10px;
                            top 0;
                            z-index 2;

                        .line
                            width 60vw;
                            height 21vw;
                            text-align center;

                            &::after
                                display block;
                                content '';
                                width 60vw;
                                height 1px;
                                border-top 1px dashed $theme-common-color;
                                position absolute;
                                left 0;
                                top 50%;

                            .svg-icon
                                font-size 10vw;
                                position absolute;
                                left 50%;
                                top 50%;
                                margin-top -7vw;
                                margin-left -5vw;
                                z-index 4;


                        .self-img
                            position absolute;
                            border none;
                            right -10px;
                            top 0;
                            z-index 2;

                    .tip
                        text-align center;
                        margin 15px 0px;

                        > p
                            line-height 1.6em;

                    .compute
                        width calc(100vw - 20vw);
                        height 40px;
                        line-height 40px;
                        font-size 18px;
                        border-radius 200px;
                        margin-left -10vw;
                        background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));
                        color #fff;
                        text-align center;

                .compute-result
                    padding 15px 20px;

                    .time
                        color $theme-viceColor-font;
                        font-size 12px;
                        text-align center;
                        margin-bottom 20px;

                    .result
                        position relative;

                        .result-data
                            position absolute;
                            left calc((100vw - 40px - 300px) / 2);
                            top calc(50% - 12px);

                            .fix
                                width 300px;
                                overflow hidden;
                                border-radius 100px;

                                > div
                                    width 50%;
                                    color #fff;
                                    padding 0px 14px;
                                    font-size 12px;
                                    height 24px;
                                    line-height 24px;

                                .left
                                    background-color #FFB196;

                                .right
                                    text-align right;
                                    background-color #FF9BC8;

                            .match-degree-box
                                width 16vw;
                                height 16vw;
                                border-radius 50%;
                                background-color #fff;
                                position absolute;
                                left calc(50% - 8vw);
                                top calc(-8vw + 12px);
                                z-index 100;

                                .match-degree
                                    width 14vw;
                                    height 14vw;
                                    line-height calc(14vw - 6px);
                                    font-size 16px;
                                    border-radius 50%;
                                    border 3px solid;
                                    border-color #FFB196 #FF9BC8 #EC6786;
                                    position absolute;
                                    left calc(50% - 7vw);
                                    top calc(50% - 7vw);
                                    text-align center;
                                    color #EC6786;

                        .friend-result, .self-result
                            position relative;
                            width calc(100vw - 40px);
                            height 200px;

                            .standard
                                span.age
                                    position absolute;
                                    top 60px;
                                    left 8px;
                                    animation mymove0 6s linear infinite;
                                    @keyframes mymove0
                                        0%
                                            top 60px;
                                            left 8px;
                                        25%
                                            top 67px;
                                            left 15px;
                                        50%
                                            top 60px;
                                            left 22px;
                                        75%
                                            top 53px;
                                            left 15px;
                                        100%
                                            top 60px;
                                            left 8px;

                                span.income
                                    position absolute;
                                    top 30px;
                                    right 20px;
                                    animation mymove1 6s linear infinite;
                                    @keyframes mymove1
                                        0%
                                            top 30px;
                                            right 20px;
                                        25%
                                            top 37px;
                                            right 27px;
                                        50%
                                            top 44px;
                                            right 20px;
                                        75%
                                            top 37px;
                                            right 13px;
                                        100%
                                            top 30px;
                                            right 20px;

                                span.height
                                    position absolute;
                                    top 100px;
                                    right 8px;
                                    animation mymove2 6s linear infinite;
                                    @keyframes mymove2
                                        0%
                                            top 100px;
                                            right 8px;
                                        25%
                                            top 93px;
                                            right 15px;
                                        50%
                                            top 100px;
                                            right 22px;
                                        75%
                                            top 107px;
                                            right 15px;
                                        100%
                                            top 100px;
                                            right 8px;

                                span.house
                                    position absolute;
                                    bottom 30px;
                                    right 50px;
                                    animation mymove3 6s linear infinite;
                                    @keyframes mymove3
                                        0%
                                            bottom 30px;
                                            right 50px;
                                        25%
                                            bottom 23px;
                                            right 57px;
                                        50%
                                            bottom 30px;
                                            right 64px;
                                        75%
                                            bottom 37px;
                                            right 57px;
                                        100%
                                            bottom 30px;
                                            right 50px;

                                span.education
                                    position absolute;
                                    bottom 50px;
                                    left 8px;
                                    animation mymove4 6s linear infinite;
                                    @keyframes mymove4
                                        0%
                                            bottom 50px;
                                            left 8px;
                                        25%
                                            bottom 57px;
                                            left 15px;
                                        50%
                                            bottom 50px;
                                            left 22px;
                                        75%
                                            bottom 43px;
                                            left 15px;
                                        100%
                                            bottom 50px;
                                            left 8px;

                            .outline-dynamic
                                width 200px;
                                height 200px;
                                border-radius 50%;
                                border 2px solid rgba(236, 103, 134, .2);
                                box-shadow: 0px 0px 8px 2px rgba(236, 103, 134, .2);
                                position absolute;
                                top calc(50% - 100px);
                                left calc(50% - 100px);
                                animation mychange 2s linear infinite;
                                @keyframes mychange
                                    100%
                                        width 230px;
                                        height 230px;
                                        top calc(50% - 230px / 2);
                                        left calc(50% - 230px / 2);
                                        border 2px solid rgba(236, 103, 134, 0);
                                        box-shadow: none;


                            .outline
                                width 40vw;
                                height 40vw;
                                border-radius 50%;
                                border 1px solid rgba(236, 103, 134, .2);
                                position absolute;
                                top calc(50% - 20vw);
                                left calc(50% - 20vw);

                                .innerline
                                    width 30vw;
                                    height 30vw;
                                    border-radius 50%;
                                    border 1px solid rgba(236, 103, 134, .2)
                                    text-align center;
                                    position absolute;
                                    top 5vw;
                                    left 5vw;

                                    .friend-img, .self-img
                                        position absolute;
                                        top 6vw;
                                        left 6vw;

                                    .title-tip
                                        width 30vw;
                                        height 20px;
                                        line-height 20px;
                                        font-size 13px;
                                        text-align center;
                                        background-color rgba(255, 255, 255, .8);
                                        position absolute;
                                        bottom 16px;


            .friend-dynamic-box
                padding-bottom 0;
                .friend-dynamic
                    .item
                        padding 0px 15px;
                        background-color #fff;
                        margin-top 8px;

                        &:first-child
                            margin-top 0px;

                        .title
                            padding 15px 0px;

                        .upload-headImg
                            width 36vw;
                            height 42vw;

                        .upload-selfIntro
                            padding 15px 10px;
                            background-color $theme-page-chat-background-color;

                        .other
                            padding 15px 0px;
                            color $theme-viceColor-font;

        .fix-box
            width 100vw;
            position fixed;
            bottom 0px;
            z-index 1000;
            background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));
            padding 15px 0px;
            padding-bottom calc(15px + var(--safe-area-inset-bottom));
            color #fff;

            > div
                width 50vw;
                text-align center;
                border-right 1px solid #fff;

                &:last-child
                    border none;

                span.iconfont
                    padding-right 10px;

    .tab-content-wrap
        &::before
            display table;
            content "";

        //padding-bottom calc(66px + var(--safe-area-inset-bottom));
        min-height calc(100vh - 46px - 46px - var(--safe-area-inset-top));

        .none-dynamic
            text-align center;
            padding-top 80px;
            color $theme-viceColor-font;

            .icon-zanwudongtai
                font-size 100px;

</style>
